<template>
  <div class="bigDiv">
    <div class="topDiv">
      <top></top>
    </div>
    <div class="middleDiv">
      <main-middle />
    </div>
    <div class="bottomDiv">
      <!-- <span>底部</span> -->
      <bottom></bottom>
    </div>
  </div>
</template>

<script>
import top from "@/components/top";
import bottom from "@/components/bottom";
import mainMiddle from "@/components/mainMiddle";
export default {
  name: "main",
  // 引入的组件需要在这注册
  components: { top, bottom, mainMiddle },
};
</script>
<style scoped>
.bigDiv {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /*定义排列方向为竖排*/
}
.topDiv {
  height: 4rem;
}
.middleDiv {
  display: flex;
  flex: 1;
}
.middleLeftDiv {
  width: 20rem;
}
.middleRightDiv {
  flex: 1;
}
.bottomDiv {
  height: 3rem;
}
</style>
